<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Edit class</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/main.css" >
    <script type="text/javascript" src="./js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="./js/jquery-ui-1.10.4.custom.min.js"></script>
    <style>
    .ui-selecting, .ui-selected { background: lightBlue; }
    .ui-selected-full { background: lightGreen;}
    .messagepop {
        display: none;
        width: 190px;
        /*height: 60px;*/
        position: absolute;
        background: #fff;
        padding: 20px 15px;
        box-shadow: 1px 1px 3px #BBBBBB;
    }

    #popup-delete {
        width: 280px;;
    }

    .shadow {
        display: none;
        width: 100%;
        min-height: 100%;
        background-color: rgba(0,0,0,0.5);
        overflow: hidden;
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 999;
    }

    .left {

    }

    .messagepop table tbody tr td{
        padding: 5px;
    }
    </style>
</head>
<body>
    <div id="header">
            
    </div><!-- header -->
    
    <div class="container">
        <div class="main-left">
        <div class="main-right">
            <div class="main">
                <div class="nav">
                    <ul>
                        <li>
                            <a id="tab" href="#">Classes</a>
                            <span class="courses-button">▼</span>
                            <ul class="courses-dd" id="tab">
                                <li><a href="#">Software Engineering</a></li>
                                <li><a href="#">Operating Systems</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Schedule</a></li>
                        <li><a href="#">Help</a></li>
                    </ul>
                </div><!-- nav end-->
                
                <div class="content">
                    <div class="offset">
                        <div class="left">
                            <table class="crumbs">
                                <tbody>
                                    <tr>
                                        <!-- change java code here -->
                                        <td class="first">
                                            <a href="#">
                                                Classes
                                            </a>
                                        </td>
                                        <td>→</td>
                                        <td class="first"><a href="#">Software Engineering</a></td>
                                        <td>→</td>
                                        <td class="last"><em>Edit class settings</em></td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="success">
                                Your class has successfully been edited. Go to the <a href="#">class page</a> to see your changes.
                            </div>
                            <div class="page-left">
                                <h2 class="feed-header">
                                    <a class="course-name round-5" href="#">Software Engineering</a>
                                    Edit course
                                </h2>
                                <div class="course-edit">
                                    <form class="course-edit-form" action="" method="post">
                                        <table class="settings-grid">
                                            <tr>
                                                <td class="settings-info">
                                                    <h3>Course information</h3>
                                                    <span>
                                                        Edit base information for this course
                                                    </span>
                                                    <p>
                                                        <span>
                                                        To choose more than one group, press Ctrl + Mouse left button.
                                                        </span>
                                                    </p>
                                                </td>
                                                <td class="settings-content">
                                                    <table class="settings-table">
                                                        <tbody>
                                                            <tr>
                                                                <td class="label">
                                                                    Class name:
                                                                </td>
                                                                <td>
                                                                    <input type="text" class="input big-field" value="Software Engineering" name="name" id="name">
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td class="label">
                                                                    Choose groups:
                                                                </td>
                                                                <td>
                                                                    <button class="btn" id="groups-list-button">
                                                                        <span>groups list</span>
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <table class="calendar">

                                                                    <thead>
                                                                        <tr>
                                                                            <th></th>
                                                                            <th data-col="0">Monday</th>
                                                                            <th data-col="1">Tuesday</th>
                                                                            <th data-col="2">Wednesday</th>
                                                                            <th data-col="3">Thursday</th>
                                                                            <th data-col="4">Friday</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        <tr>
                                                                            <td>09:00</td>
                                                                            <td data-col="0"></td>
                                                                            <td data-col="1"></td>
                                                                            <td data-col="2"></td>
                                                                            <td data-col="3"></td>
                                                                            <td data-col="4"></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>10:00</td>
                                                                            <td data-col="0"></td>
                                                                            <td data-col="1"></td>
                                                                            <td data-col="2"></td>
                                                                            <td data-col="3"></td>
                                                                            <td data-col="4"></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>11:00</td>
                                                                            <td data-col="0"></td>
                                                                            <td data-col="1"></td>
                                                                            <td data-col="2"></td>
                                                                            <td data-col="3"></td>
                                                                            <td data-col="4"></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>12:00</td>
                                                                            <td data-col="0"></td>
                                                                            <td data-col="1"></td>
                                                                            <td data-col="2"></td>
                                                                            <td data-col="3"></td>
                                                                            <td data-col="4"></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>13:00</td>
                                                                            <td data-col="0"></td>
                                                                            <td data-col="1"></td>
                                                                            <td data-col="2"></td>
                                                                            <td data-col="3"></td>
                                                                            <td data-col="4"></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>14:00</td>
                                                                            <td data-col="0"></td>
                                                                            <td data-col="1"></td>
                                                                            <td data-col="2"></td>
                                                                            <td data-col="3"></td>
                                                                            <td data-col="4"></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>15:00</td>
                                                                            <td data-col="0"></td>
                                                                            <td data-col="1"></td>
                                                                            <td data-col="2"></td>
                                                                            <td data-col="3"></td>
                                                                            <td data-col="4"></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>16:00</td>
                                                                            <td data-col="0"></td>
                                                                            <td data-col="1"></td>
                                                                            <td data-col="2"></td>
                                                                            <td data-col="3"></td>
                                                                            <td data-col="4"></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>17:00</td>
                                                                            <td data-col="0"></td>
                                                                            <td data-col="1"></td>
                                                                            <td data-col="2"></td>
                                                                            <td data-col="3"></td>
                                                                            <td data-col="4"></td>
                                                                        </tr>

                                                                    </tbody>
                                                                </table>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                        <div class="course-edit-submit">
                                            <button class="btn-green" id="course-edit-submit"><span>Save changes</span></button>
                                        </div>
                                    </form>
                                </div>
                                <div class="clear"></div>
                                <div class="messagepop pop">
                                    <form method="post" id="new_message" action="/messages">
                                    <table>
                                        <tbody class="pop-table">
                                            <tr>
                                                <td class="label">Choose clasroom:</td>
                                                <td>
                                                    <select id="classroom">
                                                        <option value="A1">A1</option>
                                                        <option value="A2">A2</option>
                                                        <option value="B1">B1</option>
                                                        <option value="B2">B2</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="label">Choose Group:</td>
                                                <td>
                                                    <select id="group">
                                                        <option value="A1">A-04</option>
                                                        <option value="A2">B-04</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                <button class="btn-green"value="Add" name="submit" id="pop_submit"><span>Add</span></button> or <a id="pop_cancel" href="#">Cancel</a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    </form>
                                </div>
                                <div class="messagepop" id="popup-delete">
                                    <form method="post" action="/messages">
                                        <table>
                                            <tbody class="pop-table">
                                            <tr>
                                                <td class="label">Choose clasroom:</td>
                                                <td>
                                                    <select id="classroom">
                                                        <option value="A1">A1</option>
                                                        <option value="A2">A2</option>
                                                        <option value="B1">B1</option>
                                                        <option value="B2">B2</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="label">Choose Group:</td>
                                                <td>
                                                    <select id="group">
                                                        <option value="A1">A-04</option>
                                                        <option value="A2">B-04</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <button class="btn-green" value="Change" name="change" id="btn-pop-change"><span>Change</span></button>
                                                    <button class="btn-red" value="Delete" name="delete" id="btn-pop-delete"><span>Delete</span></button>
                                                    or <a id="pop-delete-cancel" href="#">Cancel</a>
                                                </td>

                                            </tr>
                                            </tbody>
                                        </table>
                                    </form>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="right-fade">
                            <div class="right-time">
                                <span class="time round-3">
                                    Monday, Apr 14th, 
                                    <abbr id="current-time">10:14am</abbr>
                                </span>
                            </div>
                            <div class="right-classes">
                                <h2>Your classes</h2>
                                <ul class="courses_ul">
                                    <li class="course_li" id="course_123123">
                                        <a id="course_123123" class="course" href="#">
                                        Software Engineering
                                        </a>
                                    </li>
                                    <li class="course_li" id="course_123123">
                                        <a id="course_123123" class="course" href="#">
                                        Operating Systems
                                        </a>
                                    </li>
                                </ul>
                                <div class="clear"></div>
                                <a href="#">Add a class</a>
                                <div class="clear"></div>
                            </div>
                            <div class="clear"></div>
                            <div class="right-extras">
                                <h2>Support</h2>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>

            </div>
            <div class="clear"></div>
        </div>
        </div>
        <div class="clear"></div>
    </div><!-- container end-->


    <!-- popup window start -->
    <div class="shadow">
    </div>
    <div class="groups-popup">
        <div class="left">
            <table class="groups-left-list">
                <thead>
                <tr>
                    <th >
                        <input type="checkbox" id="check-all" name="check-all"/>
                    </th>
                    <th>
                        Group name
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr id="0">
                    <td>
                        <input type="checkbox" id="checkbox-0" name="groups_list[]" value="0"/>
                    </td>
                    <td>
                        <label for="checkbox-0">En A-04</label>
                    </td>
                </tr>
                <tr id="1">
                    <td>
                        <input type="checkbox" id="checkbox-1" name="groups_list[]" value="1"/>
                    </td>
                    <td>
                        <label for="checkbox-1">En B-04</label>
                    </td>
                </tr>
                <tr id="2">
                    <td>
                        <input type="checkbox" id="checkbox-2" name="groups_list[]" value="2"/>
                    </td>
                    <td>
                        <label for="checkbox-2">En C-04</label>
                    </td>
                </tr>
                <tr id="3">
                    <td>
                        <input type="checkbox" id="checkbox-3" name="groups_list[]" value="3"/>
                    </td>
                    <td>
                        <label for="checkbox-3">En A-03</label>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="right">
            <table class="group-students">
                <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="check-all-students" name="check-all-students"/>
                    </th>
                    <th>
                        Student name
                    </th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
        <div class="clear"></div>
        <div class="bottom" style="position: absolute; top: 5px; right: 10px;">
            <a href="#" id="groups-popup-cancel" style="border: none; font-size: 15px;">X</a>
        </div>
    </div>
    <!-- popup window end -->

    <div id="footer">
        
    </div>
    <script src="./js/jquery-main.js"></script>
    <script src="./js/jquery-calendar.js"></script>
    <script>
    $(document).ready(function() {
        $("#course-edit-submit").click(function() {
            var success = true;
            if (success) {
                //var top = $(".nav").offset().top;
                $(".success").css("display", "block");
                $(".success").delay(5000).fadeOut("slow");
                $("html, body").animate( {
                    scrollTop: 0
                }, 500);
            } else {

            }

            return false;
        });
        $(document).mouseup(function(ev) {
            var element = ev.target;
            console.log($(element).closest("div").hasClass("pop"));
            var flag = $(element).closest("div").hasClass("pop");
            //$(element).closest("tbody").hasClass("pop-table");
            if (flag !== true) {
                $(".ui-selected").removeClass("ui-selected");
                $(".pop").fadeOut(50);
            }
        });
        $("#groups-list-button").click(function(ev) {
            ev.preventDefault();
            var popup = $(".groups-popup");
            var height = $(window).height();
            var width = $(window).width();
            var popHeight = popup.height();
            var popWidth =  popup.width();
            $(".shadow").css("display", "block");
            popup.css({
                "display": "block",
                "left": (width - popWidth) / 2,
                "top": Math.max((height - popHeight) / 3, 20),
                "position": "absolute"
            });

        });

        $("#groups-popup-cancel").click(function() {
            $(".shadow").css("display", "none");
            $(".groups-popup").css("display", "none");
        });


        function changeRowColor(checked, element, c) {
            var t = element.closest("tr");
            if (checked)
                t.addClass(c);
            else
                t.removeClass(c);
        }

        $("#check-all").click(function(ev) {
            var checked = $(ev.target).prop("checked");
            if (checked == undefined) checked = false;
            clearStudentsList();
            $("input[name='groups_list[]']").each(function() {
                $(this).prop("checked", checked);
                changeRowColor(checked, $(this), "active");
            });
        });


        function fillStudentsList(list) {
            var htmlGroupStudents = $(".group-students tbody");
            for (var i = 0; i < 30; i++) {
                var a = '<tr><td>' +
                        '<input type="checkbox" id="checkbox-stud-' + i + '" name="groups_list_students[]" checked/>' +
                        '</td>';
                a += '<td>' +
                        '<label for="checkbox-stud-' + i + '">Adilbek Zhaxalykov' + Math.random() + ' </label>' +
                        '</td></tr>';
                htmlGroupStudents.append(a);
            }
            $("#check-all-students").prop("checked", true);

        }

        function clearStudentsList() {
            var htmlGroupStudents = $(".group-students tbody");
            // cleaning pervious students
            htmlGroupStudents.attr("id", "");
            htmlGroupStudents.html("");
        }


        var clicked;
        $("input[name='groups_list[]']").click(function(ev) {
            var target = $(ev.target);
            var element = target.closest("tr");
            var checked = target.prop("checked");
            if (checked == undefined) checked = false;
            changeRowColor(checked, target, "active");
            console.log(element);
            console.log(element.attr("id"));
            console.log(clicked);
            var groupStudents = {};
            if (clicked == element.attr("id")) {
                clearStudentsList();
                clicked = undefined;
            }
            if (checked) {
                clearStudentsList();
                fillStudentsList(groupStudents);
                clicked = element.attr("id");
            }

        });

        $("#check-all-students").click(function() {
            var checked = $(this).prop("checked");
            if (checked === undefined) checked = false;
            $('input[name="groups_list_students[]"]').each(function() {
                $(this).prop("checked", checked);
            });
        });
    });
    </script>
</body>
</html>